<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">

		<script type="text/javascript" src="../js/xadmin.js"></script>
		<script type="text/javascript" src="../js/jquery-2.2.4.min.js"></script>
		<link rel="stylesheet" href="../lib/layui/css/layui.css">
		<link rel="stylesheet" href="../css/font.css">

		<!-- favicon
		============================================ -->
		<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">

		<!-- Google Fonts
		============================================ -->
		<link href='https://fonts.googleapis.com/css?family=Lato:400,400italic,900,700,700italic,300' rel='stylesheet' type='text/css'>

		<!-- Bootstrap CSS
		============================================ -->
		<link rel="stylesheet" href="./css/bootstrap.min.css">

		<!-- nivo slider CSS
		============================================ -->
		<link rel="stylesheet" href="lib/nivo-slider/css/nivo-slider.css" type="text/css" />
		<link rel="stylesheet" href="lib/nivo-slider/css/preview.css" type="text/css" media="screen" />

		<!-- Fontawsome CSS
		============================================ -->
		<link rel="stylesheet" href="css/font-awesome.min.css">

		<!-- owl.carousel CSS
		============================================ -->
		<link rel="stylesheet" href="css/owl.carousel.css">

		<!-- jquery-ui CSS
		============================================ -->
		<link rel="stylesheet" href="css/jquery-ui.css">

		<!-- meanmenu CSS
		============================================ -->
		<link rel="stylesheet" href="css/meanmenu.min.css">

		<!-- animate CSS
		============================================ -->
		<link rel="stylesheet" href="css/animate.css">

		<!-- style CSS
		============================================ -->
		<link rel="stylesheet" href="style.css">

		<!-- responsive CSS
		============================================ -->
		<link rel="stylesheet" href="css/responsive.css">

		<!-- modernizr JS
		============================================ -->
		<script src="js/vendor/modernizr-2.8.3.min.js"></script>
	</head>
	<body style="background-color: #F2F2F2;">


		<!-- <div class="menu">
			<a class="button" href="javascript:void(0)" onclick="">买车</a>
			<a class="button" href="javascript:void(0)" onclick="">卖车</a>
			<a class="button" href="javascript:void(0)" onclick="">快速估价</a>
			<a class="button" href="javascript:void(0)" onclick="">个人中心</a>
			<a class="button" href="javascript:void(0)" onclick="leave()">安全退出</a>
			<span class="right" text="| 欢迎: ${loginUser.username}!|"></span>
		</div> -->
		<!--Mainmenu Start-->
		<div class="mainmenu-area hidden-sm hidden-xs">
			<div id="sticker">
				<div class="container">
					<div class="row">
						<div class="col-lg-12 col-md-12 hidden-sm">
							<div class="mainmenu" style="color: #007DDB;">
								
								<nav>
									<ul id="nav" >
										<li><a style="font-size: 20px;color: #009688;" href="home.html">二手车交易平台</a></li>
										<li style="margin-left: 120px;"></li>
										<li class="current"><a class="lfont" href="home.html" style="color: red;">买车</a></li>
										<li><a href="sell.html">卖车</a></li>
										<li><a href="buy.html">求购</a></li>
										<li><a href="user.html">个人中心</a></li>
										<li><a id="logOut">安全退出</a></li>
										<!-- <li><a> </a></li>
										<li style="color: #000000;font-size: 16px;">欢迎：</li>
										<li id="user" style="color: #000000;font-size: 16px;"></li> -->
									</ul>
								</nav>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--End of Mainmenu-->
		<hr />
		<div>
			<form id="searchForm" style="text-align: center;border: #007DDB;">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">品牌:</label>
						<div class="layui-input-inline select">
							<select name="brand" id="brand">
								<option value="">选择汽车品牌</option>
								<option>大众</option>
								<option>奔驰</option>
								<option>宝马</option>
								<option>别克</option>
								<option>红旗</option>
								<option>五菱</option>
								<option>特斯拉</option>
							</select>
						</div>
						<label class="layui-form-label" style="width: 100px;">汽车类型:</label>
						<div class="layui-input-inline select">
							<select name="type" id="type">
								<option value="">选择汽车类型</option>
								<option>轿车</option>
								<option>跑车</option>
								<option>商务车</option>
								<option>越野车</option>
								<option>电动车</option>
							</select>
						</div>
						<label class="layui-form-label" style="width: 100px;">标价范围:</label>
						<div class="layui-input-inline" style="width: 100px;">
							<input type="text" id="priceStr" name="priceStr" placeholder="￥" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-form-mid">万 -</div>
						<div class="layui-input-inline" style="width: 100px;">
							<input type="text" id="priceEnd" name="priceEnd" placeholder="￥" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-form-mid">万</div>

						<div class="layui-input-inline">
							<button type="button" class="layui-btn"  onclick="searchForm1()">搜索</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</div>

			</form>
		</div>
		<div class="shop-main-area">
			<div class="container">
				<div class="row" style="text-align: center;">
					<div class="col-md-12">
						<div class="tab-content">
							<div role="tabpanel" class="tab-pane active" id="grid">
								<div class="row" id="view">
								</div>
							</div>
						</div>
						
						<br /><br /><br />
					</div>
				</div>
			</div>

			<script id="demo" type="test/html">
				<ul>
		  {{#  layui.each(d.data, function(index, item){ }}
		    <li>
		      <div class="col-md-3 col-sm-3">
		          <div class="single-product-item">
		              <div class="sale-product-label"><span>sale</span></div>
		              <div class="single-product clearfix">
		                  <a href="#">
		                      <span class="product-image">
								  <a href="detail.html?carId={{item.carId}}">
		                          <img src= "../images/{{item.picture}}">
								  </a>
		                      </span>
		      			</a>
		                  
		              </div>
		              <h2 class="price"><a href="detail.html?carId={{item.carId}}">{{item.brand}} {{item.model}} {{item.color || ''}}</a></h2>
					  <h2 class="single-product-name">{{item.usedTime || '/'}}年&nbsp;{{item.mileage || '/'}}万公里</a></h2>
		              <div class="price-box">
		                  <p class="old-price">
		                      <span class="price">{{item.price*1.25+2.5}}万</span>
		                  </p>
		                  <p class="special-price">
		                      <span class="price">{{item.price}}万</span>
		                  </p> 											
		              </div>
		          </div>
		      </div>
		    </li>
		  {{#  }); }}
		  
		  </ul>
		</script>
			<script src="../lib/layui/layui.js" charset="utf-8"></script>
			<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

			<script>
				var token = document.cookie.split(";")[0];
				var user;

				$.post("http://localhost:8888/usedcar/user/getByToken?token=" + token, token, function(response) {
					if (response.status = 200) {
						$("#user").html(response.username);
						user = response;
					} else if(response.status = 400) {
						$("#user").html("请登录");
					}
				});
				console.log(user);
			</script>

			<script>
				var res;
				lay();
				
				function lay(){
					layui.use('laytpl', function() {
						var data = $("#searchForm").serialize();
						laytpl = layui.laytpl;
						console.log(data);
						$.ajax({
							url: "http://localhost:8888/usedcar/car/getAbleCar?saleType=0&page=1&limit=100&token=" + document.cookie.split(";")[0],
							type: 'GET',
							dataType: 'json',
							data:data,
							async: false,
							success: function(response) {
								console.log(response);
								res = response;
								var getTpl = document.getElementById('demo').innerHTML,
									view = document.getElementById('view');
								laytpl(getTpl).render(response, function(html) {
									view.innerHTML = html;
								});
							}
						})
					
					});
				}
				
				function searchForm1(){
					var data = $("#searchForm").serialize();
					console.log(data);
					lay();
				}
			</script>

			<script type="text/javascript" src="../js/script.js"></script>
			<script type="text/javascript" src="../js/bootstrap.min.js"></script>
			<!-- jquery
		============================================ -->
			<script src="js/vendor/jquery-1.11.3.min.js"></script>

			<!-- bootstrap JS
		============================================ -->
			<script src="js/bootstrap.min.js"></script>

			<!-- nivo slider js
		============================================ -->
			<script src="lib/nivo-slider/js/jquery.nivo.slider.js" type="text/javascript"></script>
			<script src="lib/nivo-slider/home.js" type="text/javascript"></script>

			<!-- wow JS
		============================================ -->
			<script src="js/wow.min.js"></script>

			<!-- meanmenu JS
		============================================ -->
			<script src="js/jquery.meanmenu.js"></script>

			<!-- owl.carousel JS
		============================================ -->
			<script src="js/owl.carousel.min.js"></script>

			<!-- price-slider JS
		============================================ -->
			<script src="js/jquery-price-slider.js"></script>

			<!-- scrollUp JS
		============================================ -->
			<script src="js/jquery.scrollUp.min.js"></script>

			<!--Countdown js-->
			<script src="js/jquery.countdown.min.js"></script>

			<!-- Sticky Menu JS
		============================================ -->
			<script src="js/jquery.sticky.js"></script>

			<!-- Elevatezoom JS
		============================================ -->
			<script src="js/jquery.elevateZoom-3.0.8.min.js"></script>

			<!-- plugins JS
		============================================ -->
			<script src="js/plugins.js"></script>

			<!-- main JS
		============================================ -->
			<script src="js/main.js"></script>
	</body>
</html>
